The Rochester Institute of Technology's myCourses website is the main digital point of contact
for interaction between students and teachers.
The current site design lacks speediness and efficiency for students, and this could
unintentionally have a negative impact on their grades.
A new design requires the ability for a student to find exactly what they are looking for right away,
and to also show them things they may not have even been aware of.
Project Timeline
RESEARCH -- SKETCH -- WIREFRAME -- COMPS
The key to creating a good solution for this project was to start by finding out what students liked and disliked about the current website.
I started by sending out a Google Form to current and former students, some from RIT as well as some from other schools, and I was able to gather some important information about problems and features that would be necessary to improve on in the final design.
The main important things I found that I wanted to improve were:
Clearer "due dates"
A lot of times when students miss assignments, it's due to the 'due date' being hard to find in the current design!
Quicker ways to submit work
Most students said they used the site primarily to submit work and were bothered at how many clicks it took to submit an assignment.
More convenient updates (recent grades, content changes, etc)
Adding an 'Update Feed' could help users find things they may be looking for much quicker and easier.
RESEARCH -- SKETCH -- WIREFRAME -- COMPS
During the sketching process, I tried to map out a couple different solutions of organizing the main content areas that I wanted to focus on making most important:
Courses + Upcoming Assignments
Quicker Navigation
Recent Update Feed
Above is my sketch of the layout that I ended up using. It utilizes a left side navigation structure and a stickied right sidebar that holds a course feed as well as an event calendar. In the center is all your course information and content that you can easily engage with.
RESEARCH -- SKETCH -- WIREFRAME -- COMPS
After I got a basic idea of where I wanted stuff, I went to the computer and began generating some high fidelity wireframes.
RESEARCH -- SKETCH -- WIREFRAME -- COMPS
before after
The final result ended with a fresh and organized way of students to view their courses and updates quickly and efficiently.
Using color coding to help define separate courses helps the user to more effectively understand what information is corresponding to which course, and what is due soon.
With an Event Calendar and Update Feed stickied to the right side of the screen, they will be able to add and check for recent updates and important reminders that they may not have even known to look for!
Also directly on the home screen, a user is able to click on an upcoming assignment and upload work while staying on the same page.
Full page example
Thanks for viewing!
